import React, {Component} from 'react';
import {ScrollView, StyleSheet, ActivityIndicator} from 'react-native';
import {View, Text, AnimatedImage, Colors, Button} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

export default class AnimatedImageScreen extends Component {
  state = {
    loadStartCount: 0,
    refreshKey: 0,
    useRandomImage: true, // 默认为随机图片模式
  };

  // 根据状态获取图片 URL
  getImageUrl = (id) => {
    if (this.state.useRandomImage) {
      // 模式1：随机Key (强制刷新，能看到动画)
      return `https://images.pexels.com/photos/${id}/pexels-photo-${id}.jpeg?auto=compress&cs=tinysrgb&w=600&t=${new Date().getTime()}`;
    } else {
      // 模式2：固定URL (有缓存，再次刷新无动画)
      return 'https://images.pexels.com/photos/158063/bellingrath-gardens-alabama-landscape-scenic-158063.jpeg';
    }
  };

  render() {
    return (
      <TestSuite name="AnimatedImage">
        <View padding-10>
          {/* 只增加这两个切换按钮 */}
          <View row spread marginB-10>
            <Button 
              label="使用随机图片Key" 
              size={Button.sizes.small} 
              onPress={() => this.setState(prev => ({useRandomImage: true, refreshKey: prev.refreshKey + 1, loadStartCount: 0}))} 
              bg-blue30
              flex-1
              marginR-5
            />
            <Button 
              label="使用固定图片URL" 
              size={Button.sizes.small} 
              onPress={() => this.setState(prev => ({useRandomImage: false, refreshKey: prev.refreshKey + 1, loadStartCount: 0}))} 
              bg-orange30
              flex-1
              marginL-5
            />
          </View>
          <Text text90 center grey40>当前模式: {this.state.useRandomImage ? '随机 (有动画)' : '固定 (有缓存)'}</Text>
        </View>

        {/* 下面的代码保持不变 */}

        {/* Case 1: animationDuration */}
        <TestCase itShould="属性: animationDuration (对比 300ms 和 2000ms 的淡入效果)">
          <View row spread key={`anim-${this.state.refreshKey}`}>
            <View center>
              <Text text80 marginB-5>Fast (300ms)</Text>
              <AnimatedImage
                containerStyle={{backgroundColor: Colors.grey60}}
                style={{width: 150, height: 100, resizeMode: 'cover'}}
                source={{uri: this.getImageUrl('19000252')}}
                loader={<ActivityIndicator color={Colors.blue30} />}
                animationDuration={300} 
              />
            </View>
            <View center>
              <Text text80 marginB-5>Slow (2000ms)</Text>
              <AnimatedImage
                containerStyle={{backgroundColor: Colors.grey60}}
                style={{width: 150, height: 100, resizeMode: 'cover'}}
                source={{uri: this.getImageUrl('158063')}}
                loader={<ActivityIndicator color={Colors.red30} />}
                animationDuration={2000} 
              />
            </View>
          </View>
        </TestCase>

        {/* Case 2: containerStyle */}
        <TestCase itShould="属性: containerStyle (设置红色边框和背景色)">
          <View key={`cont-${this.state.refreshKey}`}>
            <Text text90 grey40 marginB-5>图片未加载时也能看到容器背景</Text>
            <AnimatedImage
              containerStyle={{
                backgroundColor: Colors.yellow60,
                borderWidth: 4,
                borderColor: Colors.red30,
                borderRadius: 10,
                padding: 10
              }}
              style={{width: '100%', height: 150, resizeMode: 'cover'}}
              source={{uri: this.getImageUrl('1108099')}}
              loader={<ActivityIndicator />}
            />
          </View>
        </TestCase>

        {/* Case 3: loader */}
        <TestCase itShould="属性: loader (自定义加载组件)">
          <View key={`load-${this.state.refreshKey}`}>
            <AnimatedImage
              containerStyle={{backgroundColor: Colors.grey80, height: 150, justifyContent: 'center'}}
              style={{width: '100%', height: 150, resizeMode: 'cover'}}
              source={{uri: this.getImageUrl('1666021')}}
              loader={
                <View center bg-white padding-10 br20>
                  <ActivityIndicator size="large" color={Colors.orange30} />
                  <Text text90 orange30 marginT-5>正在加载...</Text>
                </View>
              }
              animationDuration={1000}
            />
          </View>
        </TestCase>

        {/* Case 4: onLoadStart */}
        <TestCase itShould="属性: onLoadStart (回调触发计数)">
          <View key={`cb-${this.state.refreshKey}`}>
            <Text marginB-10 text70>
              onLoadStart 触发次数: <Text red30>{this.state.loadStartCount}</Text>
            </Text>
            <AnimatedImage
              containerStyle={{backgroundColor: Colors.grey70}}
              style={{width: '100%', height: 150, resizeMode: 'cover'}}
              source={{uri: this.getImageUrl('1525041')}}
              loader={<ActivityIndicator />}
              onLoadStart={() => this.setState(p => ({loadStartCount: p.loadStartCount + 1}))}
            />
          </View>
        </TestCase>

      </TestSuite>
    );
  }
}